<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">投保信息</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <transition name="fade">
            <group class="insure__formPolicy--group" v-model="proShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title">产品信息</span>
                    </span>
                </cell>
                <div class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">投保单号</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.policyno}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">产品名称</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.riskcname}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">起保日期</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.startdate}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">终保日期</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.enddate}}
                            </span>
                        </div>
                    </div>
                </div>
            </group>
        </transition>
        <transition name="fade">
            <group class="insure__formPolicy--group" v-show="allpiShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title ">投保人信息</span>
                    </span>
                </cell>

                <div class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <!-- <label class="weui-form-preview__label base_color">{{name}}</label> -->
                            <label class="weui-form-preview__label base_color">姓名</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.appliname}}
                            </span>
                        </div>
                        <!-- <div class="weui-form-preview__item">
                                                                                                                                 <label class="weui-form-preview__label base_color">{{idCar}}</label> 
                                                                                                                                <label class="weui-form-preview__label base_color">证件号码</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{saveInsure.policyDataDto.appliDto.identifyNumber}}
                                                                                                                                </span>
                                                                                                                            </div> -->
                        <!-- <div v-show="isPer" class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">出生日期</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{saveInsure.policyDataDto.appliDto.birth}}
                                                                                                                                </span>
                                                                                                                            </div> -->
                        <!-- <div class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">手机号码</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{saveInsure.policyDataDto.appliDto.linkMobile}}
                                                                                                                                </span>
                                                                                                                            </div>
                                                                                                                            <div class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">电子邮件</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{saveInsure.policyDataDto.appliDto.email}}
                                                                                                                                </span>
                                                                                                                            </div> -->
                    </div>
                </div>
            </group>
        </transition>
        <transition name="fade">
            <group class="insure__formPolicy--group" v-show="insureShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title ">被保人信息</span>
                    </span>
                </cell>

                <div class="weui-cell vux-cell-form-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">姓名</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.insuredname}}
                            </span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label base_color">证件号码</label>
                            <span class="weui-form-preview__value base_color">
                                {{pay.showPayData.insuredIdentifynumber}}
                            </span>
                        </div>
                        <!-- 
                                                                                                                            <div class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">出生日期</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{item.insuredDto.birth}}
                                                                                                                                </span>
                                                                                                                            </div>
                                                                                                                            <div class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">与投保人关系</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{item.insuredDto.insuredidentity|getInsuredidentity}}
                                                                                                                                </span>
                                                                                                                            </div>
                                                                                                                            <div v-show="eleShow.occupation" class="weui-form-preview__item">
                                                                                                                                <label class="weui-form-preview__label base_color">职业类别</label>
                                                                                                                                <span class="weui-form-preview__value base_color">
                                                                                                                                    {{item.insuredDto.occupationName}}
                                                                                                                                </span>
                                                                                                                            </div> -->
                    </div>
                </div>
            </group>
        </transition>
        <!-- <div style="margin-bottom: 55px;"></div> -->
        <transition name="fade">
            <group class="insure__formPolicy--group common__clause" v-if="addInfoShow">
                <cell>
                    <span class="insure__list--title" slot="after-title">
                        <span class="insure__iconspan"></span>
                        <span class="insure__iconspan--title">保障条款</span>
                    </span>
                </cell>
                <x-table :cell-bordered="false" style="background-color:#fff;">
                    <thead class="report__table--thead">
                        <tr>
                            <th style="width: 70%;">险别</th>
                            <!-- <th>保险金额</th> -->
                            <th>保额</th>
                        </tr>
                    </thead>
                    <tbody class="report__table--tbody">
                        <tr v-for="(item,index) in pay.showPayData.itemKinds" :key="index">
                            <td class="report__table--titletd">{{item.kindNameMain}}</td>
                            <!-- <td>¥{{item.premiumAmount}}</td> -->
                            <td style="text-align: right;padding-right: 30px;">¥{{item.amountMain}}</td>
                        </tr>
                    </tbody>
                </x-table>

            </group>
        </transition>

        <!-- <div class="insure__footer">
                                        <div class="insure__leftbtn">¥
                                            <span>{{pay.showPayData.sumpremium}}</span>
                                        </div>
                                        <div @click="goPay()" class="insure__rightbtn" :style="pay.payStyle">{{pay.state}}</div>
                                    </div> -->
        <!-- 支付 -->
        <!-- <pay-com></pay-com> -->

    </div>
</template>

<script>

import PayCom from "src/components/PayCom";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import {
    Mutations,
    policyHolderType,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,
    RouteUrl
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    XTable
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        PayCom,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        XTable
    },
    computed: mapState({
        isLoading: "isLoading",
        loading: "loading",
        state: "state",
        payStyle: "payStyle",
        user: "user",
        insureResData: "insureResData",
        seleCountry: "seleCountry",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        pay: "pay"
    }),
    watch: {
        insureResData(cur, old) {
            this.pay(cur.res);
        },
    },
    filters: {
        buildStructure(val) {
            return Config.getHouseTypeValue(val);
        },
        getInsuredidentity(val) {
            return Config.getRelTypeName(val);
        }
    },
    data() {
        return {
            eleShow: [],
            proShow: false,
            allpiShow: false,
            insureShow: false,
            addInfoShow: false,
            // payStyle: "background:#636365;",
            name: "姓名",
            idCar: "证件号码",
            isPer: true,
            // state: "正在投保中..",
            eleShow: {},
        };
    },
    methods: {
        goPay() {
            if (this.pay.isPay) {
                let payData = {
                    _this: this,
                    paymentNo: this.pay.showPayData.policyno,
                    riskCode: this.pay.showPayData.riskcode
                };
                this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
            }


            // let res = this.insureResData.res;
            // let isAlert = false;
            // let alertData = "";
            // if (this.loading) {
            //     if (res.success == true) {
            //         let responseJson = JSON.parse(res.result.responseJson);
            //         if (responseJson.success == "true") {
            //             let payData = {
            //                 _this: this,
            //                 paymentNo: responseJson.bussNewNo,
            //                 riskCode: this.detailsStore.curNsSelePlan.proCode
            //             };
            //             this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
            //         } else {
            //             isAlert = true;
            //             alertData = responseJson.message;
            //         }
            //     } else {
            //         isAlert = true;
            //         // alertData = res.result;
            //         alertData = "投保失败，请稍后再试！";
            //     }
            // } else {
            //     isAlert = true;
            //     alertData = responseJson.result;
            // }

            // if (isAlert) {
            //     // alertData = "投保失败，请稍后再试！";
            //     this.$vux.alert.show({
            //         content: this.$common.alertMsg(alertData, "red;")
            //     });
            // }
        },
        goBack() {
            this.$common.goBack(this);
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CONFIRM_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        if (sessionStorage["CONFIRM_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.POLICY_LIST);
        }
    },
    mounted() {
        document.title = '投保信息';
        let _this = this;
        // this.eleShow = this.saveInsure.eleShow;
        // this.proShow = true;
        // if (this.saveInsure.insureData[this.saveInsure.indexData.id].policyHolderType == policyHolderType.ENTERPRISE) {
        //     this.isPer = false;
        //     this.name = "企业名称";
        //     this.idCar = "统一社会信用代码";
        // } else {
        //     this.isPer = true;
        //     this.name = "姓名";
        //     this.idCar = "证件号码";
        // }

        setTimeout(function () {
            _this.allpiShow = true;
            setTimeout(function () {
                _this.insureShow = true;
                setTimeout(function () {
                    _this.addInfoShow = true;
                    // if (_this.saveInsure.indexData.riskCode == "2725") {
                    //     _this.isOther = false;
                    // }
                }, 1000);
            }, 1000);
        }, 1000);
        this.$init.subPageInit(this);
    }
};
</script>

<style scoped  lang="scss">
.base_color {
  color: #414244 !important;
}

.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #C8161D;
}

.insure__list--title {
  font-size: 15px;
  color: #C8161D;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

// .insure__formPolicy--group {
//     .vux-no-group-title {
//         padding-bottom: 20px;
//     }
// }
.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #C8161D;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #C8161D;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 12px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #C8161D;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: rgb(163, 163, 163);
  border: 1px solid rgb(222, 222, 222);
  padding: 2px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll;
  border: 1px solid #f3f3f3;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.report__table--thead {
  background-color: #e5ebf2;
  th {
    font-size: 12px;
    color: #808080;
  }
}

.report__table--tbody {
  td {
    font-size: 12px;
    color: #C8161D;
    text-align: left;
    padding-left: 20px;
  }
}

.report__table--titletd {
  font-size: 12px;
  color: #000000 !important;
}
</style>
